/* eslint-disable */
/**
 * Created by GYL on 2018/8/24
 */
//事件进度管理-统计区域
import React, { Component } from 'react';
import PublicService from "../../services/PublicService";
import request from '../../utils/request';
import { message, Divider, Tag, Spin, Affix, Button, Statistic, Card, Row, Col, Icon, Avatar } from 'antd';
import styles from './Progess.less';
const { Meta } = Card;
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1315525_y143gj7ab1.js',
});
class Progess_Adjust extends Component {

  state = {
    accomplishProduction: 0.0,
    collectedAmount: 0.0,
    completeProportion: 0.0,
    grandTotalMoney: 0.0,
    incurredCost: 0.0,
    monthMoney: 0.0,
    planProduction: 0.0,
    yearMoney: 0.0,
    spinning: true,
    params:{}
  }
  componentDidMount() {



    this.getAllTabulateData(this.props.params)

  }



  getAllTabulateData = (params) => {


      this.setState({
        spinning: true,
        params
      })
      request({
        url: '/pm-web/projectmanage/projectinfo/getAllTabulateData',
        method: 'POST',
        data: { userId: PublicService.getCookie('userId'), ...params }
      }).then(data => {
        if (data.rc === 0) {
          this.setState({
            accomplishProduction: data.ret.accomplishProduction,
            collectedAmount: data.ret.collectedAmount,
            completeProportion: data.ret.completeProportion,
            grandTotalMoney: data.ret.grandTotalMoney,
            incurredCost: data.ret.incurredCost,
            monthMoney: data.ret.monthMoney,
            planProduction: data.ret.planProduction,
            yearMoney: data.ret.yearMoney,
            spinning: false
          })
        }
      })
    

  }



  render() {

    let width = document.body.clientWidth;
    const height = document.body.clientHeight;
    let containerHeight = '64vh';
    let tableHeight = 310;
    if (width > 1367) {
      tableHeight = 380;
      containerHeight = '74vh';
    }
    const {accomplishProduction,collectedAmount,completeProportion,grandTotalMoney,incurredCost,monthMoney ,planProduction,yearMoney}= this.props.progessAdjustData

    return (
      <div className={styles.Adjust_warp} style={{ width: '100%', background: '#fff'}}>
          <Row gutter={16}>

            <Col span={8}>
              <Card
                headStyle={{ fontSize: 14 }}
                className={styles.card_box1}
              >
                <Meta
                  avatar={<IconFont type="icon-chanzhi" style={{ color: '#28a4b9', cursor: 'pointer', fontSize: 34 }} />}
                  title="计划产值"

                  description={`${planProduction || 0} ¥`}
                />
                <Divider />
                <Statistic
                  style={{ width: '75%', float: 'left' }}
                  title="完成产值"
                  value={accomplishProduction || 0}
                  // precision={2}
                  valueStyle={{ color: '#cf1322', fontSize: 14 }}
                  // prefix={<Icon type="arrow-down" />}
                  suffix="¥"
                />
                <Statistic
                  style={{ width: '25%', float: 'right' }}
                  title="完成比例"
                  value={completeProportion || 0}
                  // precision={2}
                  valueStyle={{ color: '#cf1322', fontSize: 14 }}
                  // prefix={<Icon type="arrow-down" />}
                  suffix="%"
                />
              </Card>
            </Col>


            <Col span={8}>
              <Card
                className={styles.card_box1}
              >
                <Meta
                  avatar={<IconFont type="icon-chengben" style={{ color: '#28a4b9', cursor: 'pointer', fontSize: 34 }} />}
                  title="项目发生成本"

                  description={`${incurredCost || 0} ¥`}
                />
                <Divider />
                <Meta
                  avatar={<IconFont type="icon-yingshou" style={{ background: 'cornsilk', cursor: 'pointer', fontSize: 34 }} />}
                  title="累计应收款额"

                  description={`${collectedAmount || 0} ¥`}
                />


              </Card>
            </Col>

            <Col span={8}>
              <Card
                headStyle={{ fontSize: 12 }}
                className={styles.card_box1}
              >
                <Meta
                  avatar={<IconFont type="icon-leijishouru" style={{ color: '#28a4b9', cursor: 'pointer', fontSize: 34 }} />}
                  title="累计回款"

                  description={`${grandTotalMoney || 0} ¥`}
                />
                <Divider />
                <Statistic
                  style={{ width: '55%', float: 'left' }}
                  title="本年回款"
                  value={yearMoney || 0}
                  // precision={2}
                  valueStyle={{ color: '#cf1322', fontSize: 14 }}
                  // prefix={<Icon type="arrow-down" />}
                  suffix="¥"
                />
                <Statistic
                  style={{ width: '45%', float: 'right' }}
                  title="本月回款"
                  value={monthMoney || 0}
                  // precision={2}
                  valueStyle={{ color: '#cf1322', fontSize: 14 }}
                  // prefix={<Icon type="arrow-down" />}
                  suffix="¥"
                />
              </Card>
            </Col>


          </Row>

      </div>

    );


  }
}
export default Progess_Adjust;

